import React, { PureComponent } from 'react';
import { connect } from 'dva';
import { Form, Modal, Input, Select } from 'antd';
import { formatMessage } from 'umi/locale';

const FormItem = Form.Item;
const { Option } = Select;

@connect(({ devices, loading }) => ({
  devices,
  loading: loading.models.devices,
}))
@Form.create()
class EditModbusForm extends PureComponent {
  render() {
    const {
      modalVisible,
      form,
      handleEditModalVisible,
      handleEdit,
      registerTypes,
      props,
      dataTypes,
      detail,
    } = this.props;

    const okHandle = () => {
      form.validateFields((error, fieldsValue) => {
        if (error) return;
        handleEdit(fieldsValue, form);
      });
    };

    const renderOption = data =>
      data.map(item => (
        <Option key={item.id} value={item.id}>
          {item.name}
        </Option>
      ));

    const renderPropOption = data =>
      data.map(item => (
        <Option key={item.id} value={item.label}>
          {item.label}
        </Option>
      ));

    return (
      <Modal
        title={formatMessage({ id: 'app.dm.devices.modbus.edit' })}
        destroyOnClose
        visible={modalVisible}
        width={618}
        onCancel={() => handleEditModalVisible()}
        onOk={okHandle}
      >
        <div style={{ width: 530, paddingLeft: 44 }}>
          <FormItem style={{ marginTop: 0, marginBottom: 0 }}>
            {form.getFieldDecorator('id', { initialValue: detail.id })(<Input type="hidden" />)}
          </FormItem>
          <FormItem style={{ marginTop: 0, marginBottom: 0 }}>
            {form.getFieldDecorator('protocolId', { initialValue: detail.protocolId })(
              <Input type="hidden" />,
            )}
          </FormItem>
          <FormItem label={formatMessage({ id: 'app.dm.devices.modbus.info.name' })} colon={false}>
            {form.getFieldDecorator('name', {
              initialValue: detail.name,
              rules: [
                {
                  required: true,
                  message: formatMessage({ id: 'app.dm.devices.modbus.info.name.place' }),
                },
              ],
            })(
              <Input
                placeholder={formatMessage({ id: 'app.dm.devices.modbus.info.name.place' })}
              />,
            )}
          </FormItem>

          <FormItem
            label={formatMessage({ id: 'app.dm.devices.modbus.info.propertyLabel' })}
            colon={false}
          >
            {form.getFieldDecorator('propertyLabel', {
              initialValue: detail.propertyLabel,
              rules: [
                {
                  required: false,
                  message: formatMessage({ id: 'app.dm.devices.modbus.info.propertyLabel.place' }),
                },
              ],
            })(
              <Select
                allowClear
                style={{ width: '100%' }}
                placeholder={formatMessage({
                  id: 'app.dm.devices.modbus.info.propertyLabel.place',
                })}
              >
                {renderPropOption(props)}
              </Select>,
            )}
          </FormItem>

          <FormItem
            label={formatMessage({ id: 'app.dm.devices.modbus.info.datatype' })}
            colon={false}
          >
            {form.getFieldDecorator('dataType', {
              initialValue: { key: detail.dataTypeId, label: detail.dataTypeName },
              rules: [
                {
                  required: true,
                  message: formatMessage({ id: 'app.dm.devices.modbus.info.dataType.place' }),
                },
              ],
            })(
              <Select
                allowClear
                style={{ width: '100%' }}
                labelInValue
                placeholder={formatMessage({
                  id: 'app.dm.devices.modbus.info.dataType.place',
                })}
              >
                {renderOption(dataTypes)}
              </Select>,
            )}
          </FormItem>

          <FormItem
            label={formatMessage({ id: 'app.dm.devices.modbus.info.registerType' })}
            colon={false}
          >
            {form.getFieldDecorator('registerType', {
              initialValue: { key: detail.registerTypeId, label: detail.registerTypeName },
              rules: [
                {
                  required: true,
                  message: formatMessage({ id: 'app.dm.devices.modbus.info.registerType.place' }),
                },
              ],
            })(
              <Select
                allowClear
                labelInValue
                style={{ width: '100%' }}
                placeholder={formatMessage({
                  id: 'app.dm.devices.modbus.info.registerType.place',
                })}
              >
                {renderOption(registerTypes)}
              </Select>,
            )}
          </FormItem>
          <FormItem
            label={formatMessage({ id: 'app.dm.devices.modbus.info.startAddress' })}
            colon={false}
          >
            {form.getFieldDecorator('startAddress', {
              initialValue: detail.startAddress,
              rules: [
                {
                  required: true,
                  message: formatMessage({ id: 'app.dm.devices.modbus.info.startAddress.place' }),
                },
              ],
            })(
              <Input
                placeholder={formatMessage({ id: 'app.dm.devices.modbus.info.startAddress.place' })}
              />,
            )}
          </FormItem>
          <FormItem
            label={formatMessage({ id: 'app.dm.devices.modbus.info.registerCounts' })}
            colon={false}
          >
            {form.getFieldDecorator('registerCounts', {
              initialValue: detail.registerCounts,
              rules: [
                {
                  required: true,
                  message: formatMessage({ id: 'app.dm.devices.modbus.info.registerCounts.place' }),
                },
              ],
            })(
              <Input
                placeholder={formatMessage({
                  id: 'app.dm.devices.modbus.info.registerCounts.place',
                })}
              />,
            )}
          </FormItem>
        </div>
      </Modal>
    );
  }
}
export default EditModbusForm;
